﻿@page
@{ Layout = "_Layout"; }

<div style="height: 10px"></div>

<el-table :data="relatedFields" style="width: 100%">
  <el-table-column label="联动字段名称">
    <template slot-scope="scope">
      <el-link
        :underline="false"
        v-on:click="btnItemsClick(scope.row)"
        type="primary">
        {{scope.row.title}}
      </el-link>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="280">
    <template slot-scope="scope">
      <el-link
        :underline="false"
        style="margin-right: 10px;"
        v-on:click="btnItemsClick(scope.row)"
        type="primary">
        管理字段项
      </el-link>
      <el-link
        :underline="false"
        style="margin-right: 10px;"
        v-on:click="btnEditClick(scope.row)"
        type="primary">
        编辑
      </el-link>
      <el-link
        :underline="false"
        v-if="!scope.row.isSystem"
        type="danger"
        v-on:click="btnDeleteClick(scope.row.id, scope.row.title)">
        删除
      </el-link>
    </template>
  </el-table-column>
</el-table>

<div style="height: 10px"></div>
<el-divider></el-divider>
<div style="height: 10px"></div>

<el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-plus" v-on:click="btnAddClick">
  新增字段
</el-button>
<el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-upload" v-on:click="btnImportClick">
  导 入
</el-button>
<el-button size="small" type="primary" plain style="margin-left: 0px;" icon="el-icon-download" v-on:click="btnExportClick">
  导 出
</el-button>

<el-drawer
  id="editorForm"
  v-if="editorForm"
  :title="editorForm.id ? '编辑联动字段' : '新增联动字段'"
  :visible.sync="editorPanel"
  destroy-on-close
  direction="rtl"
  size="80%">
  <div class="drawer__content">
    <div style="height: 10px"></div>
    <el-form v-on:submit.native.prevent size="small" ref="editorForm" :model="editorForm" label-width="150px" :rules="{
        title: [
          { required: true, message: '请输入联动字段名称', trigger: 'blur' }
        ]
      }">
      <el-form-item label="联动字段名称" prop="title">
        <el-input v-model="editorForm.title" placeholder="请输入联动字段名称"></el-input>
      </el-form-item>

      <el-divider></el-divider>
      <div class="drawer__footer">
        <el-button type="primary" v-on:click="btnEditorSubmitClick" size="small">确 定</el-button>
        <el-button size="small" v-on:click="btnCancelClick">取 消</el-button>
      </div>
    </el-form>
  </div>
</el-drawer>

<el-drawer
  title="导入联动字段"
  ref="uploadPanel"
  :visible.sync="uploadPanel"
  destroy-on-close
  direction="rtl"
  size="50%">
  <div class="drawer__content">
    <br />
    <el-form v-on:submit.native.prevent ref="uploadForm" label-width="200px">
      <el-upload
        :drag="true"
        :limit="1"
        :action="urlUpload"
        :auto-upload="true"
        :headers="{Authorization: 'Bearer ' + $token}"
        :file-list="uploadList"
        :before-upload="uploadBefore"
        :on-progress="uploadProgress"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :multiple="false">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
      </el-upload>
    </el-form>
  </div>
</el-drawer>

<el-drawer
  id="itemsForm"
  v-if="itemsRelatedField"
  :title="'管理字段项 - ' + itemsRelatedField.title"
  :visible.sync="itemsPanel"
  destroy-on-close
  direction="rtl"
  size="80%">
  <div style="padding: 0 10px">

    <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" style="width: 100%;">
      <div class="hidden-columns">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="el-table__header-wrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
          <colgroup>
            <col name="el-table_1_column_1">
            <col name="el-table_1_column_2">
            <col name="el-table_1_column_4" width="240">
          </colgroup>
          <thead class="has-gutter">
            <tr class="">
              <th colspan="1" rowspan="1" class="el-table_1_column_1 is-leaf">
                <div class="cell">选项名称</div>
              </th>
              <th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
                <div class="cell">选项值</div>
              </th>
              <th colspan="1" rowspan="1" class="el-table_1_column_4 is-leaf">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="el-table__column-resize-proxy" style="display: none;"></div>
    </div>

    <el-tree
      ref="itemsTree"
      :data="itemsTree"
      :default-expanded-keys="itemsExpandedIds"
      node-key="value"
      highlight-current
      class="tree"
    >
      <div class="el-table__body-wrapper is-scrolling-none" slot-scope="{ node, data }">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
          <colgroup>
            <col name="el-table_1_column_1">
            <col name="el-table_1_column_2">
            <col name="el-table_1_column_4" width="240">
          </colgroup>
          <tbody>
            <tr class="el-table__row">
              <td rowspan="1" colspan="1" class="el-table_1_column_1">
              <div class="cell">
              {{ data.label }}
            </div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_1_column_2">
              <div class="cell">
                {{ data.itemValue }}
              </div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_1_column_4">
              <div class="cell">
                <el-button type="text" size="mini" style="margin-left: 5px" v-on:click.stop="btnItemsUpClick(data)">
                  上升
                </el-button>
                <el-button type="text" size="mini" style="margin-left: 5px" v-on:click.stop="btnItemsDownClick(data)">
                  下降
                </el-button>
                <el-button type="text" size="mini" style="margin-left: 5px" v-on:click.stop="btnItemsEditClick(data)">
                  编辑
                </el-button>
                <el-button type="text" size="mini" style="margin-left: 5px" v-on:click.stop="btnItemsDeleteClick(data.label, data.value)">
                  删除
                </el-button>
                <el-button type="text" size="mini" style="margin-left: 5px" v-on:click.stop="btnItemsAddClick(data.label, data.value)">
                  批量添加
                </el-button>
              </div>
            </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-tree>
  
    <div style="height: 10px"></div>
    <el-divider></el-divider>
    <div style="height: 10px"></div>
  
    <div>
      <el-button
      size="small"
      type="primary"
      v-on:click="btnItemsAddClick('', 0)">
      批量添加
    </el-button>
    </div>

  </div>
</el-drawer>

<el-dialog
  id="itemsAdd"
  title="批量添加"
  v-if="itemsAddForm && itemsAddForm.items"
  :visible.sync="itemsAddDialog"
  width="50%">

  <el-form v-on:submit.native.prevent size="small" class="form-fixed" :model="itemsAddForm" ref="itemsAddForm1" :inline="false" label-width="100px">
    <el-form-item v-if="itemsParentName" label="上级选项">
      {{ itemsParentName }}
    </el-form-item>
    <el-form-item prop="isRapid" label="设置选项">
      <el-select v-model="itemsAddForm.isRapid" placeholder="请选择设置选项">
        <el-option :value="true" label="快速设置"></el-option>
        <el-option :value="false" label="详细设置"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="itemsAddForm.isRapid" label="选项可选值" prop="rapidValues" :rules="{ required: true, message: '请输入选项可选值' }">
      <el-input v-model="itemsAddForm.rapidValues" :rows="10" type="textarea" placeholder="请输入选项可选值"></el-input>
      <div class="tips">多个选项使用换行分隔</div>
    </el-form-item>
  </el-form>
  <el-form v-on:submit.native.prevent size="small" :model="itemsAddForm" ref="itemsAddForm2" :inline="true" label-position="top" label-width="130px">
    <template v-if="!itemsAddForm.isRapid" v-for="(item, index) in itemsAddForm.items">
      <el-form-item :label="'选项名称（' + (index + 1) + '）'" :prop="'items.' + index + '.key'" :rules="{
        required: true, message: '请输入选项名称'
      }">
        <el-input v-model="item.key" placeholder="请输入选项名称"></el-input>
      </el-form-item>
      <el-form-item :label="'选项值（' + (index + 1) + '）'" :prop="'items.' + index + '.value'" :rules="{
        required: true, message: '请输入选项值'
      }">
        <el-input v-model="item.value" placeholder="请输入选项值"></el-input>
      </el-form-item>
      <el-form-item>
        <div style="padding-top: 42px">
          <el-button size="mini" style="margin-left: 10px" v-if="index > 0" v-on:click="btnItemRemoveClick(index)">删 除</el-button>
          <el-button size="mini" style="margin-left: 10px" v-if="index + 1 === itemsAddForm.items.length" v-on:click="btnItemAddClick">新 增</el-button>
        </div>
      </el-form-item>
      <br />
    
    </template>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button size="small" type="primary" v-on:click="btnItemsAddSubmitClick">确 定</el-button>
    <el-button size="small" v-on:click="btnItemsAddCancelClick">取 消</el-button>
  </span>
</el-dialog>

<el-dialog
  id="itemsEdit"
  title="编辑"
  v-if="itemsEditForm"
  :visible.sync="itemsEditDialog"
  width="50%">

  <el-form v-on:submit.native.prevent size="small" :model="itemsEditForm" ref="itemsEditForm" :inline="true" label-position="top" label-width="130px">
    <el-form-item label="选项名称" prop="label" :rules="{
      required: true, message: '请输入选项名称'
    }">
      <el-input v-model="itemsEditForm.label" placeholder="请输入选项名称"></el-input>
    </el-form-item>
    <el-form-item label="选项值" prop="value" :rules="{
      required: true, message: '请输入选项值'
    }">
      <el-input v-model="itemsEditForm.value" placeholder="请输入选项值"></el-input>
    </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button size="small" type="primary" v-on:click="btnItemsEditSubmitClick">确 定</el-button>
    <el-button size="small" v-on:click="btnItemsEditCancelClick">取 消</el-button>
  </span>
</el-dialog>

@section Scripts{
<script src="/sitefiles/assets/js/admin/cms/settingsStyleRelatedField.js" type="text/javascript"></script> }